<html>
<head>
    <link rel="stylesheet" type="text/css" media="screen" href="load?fileName=jquery-ui-1.7.2.custom.css&mediUser=leduser&mediPass=dfgdfgd&identifier=20121111731824&isAdmin=false" />
    <link rel="stylesheet" type="text/css" media="screen" href="load?fileName=ui.jqgrid.css&mediUser=leduser&mediPass=dfgdfgd&identifier=20121111731824&isAdmin=false" />

    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
    <script type="text/javascript" src="load?fileName=jqGrid-3.6.4.min.js&mediUser=leduser&mediPass=dfgdfgd&identifier=20121111731824&isAdmin=false"></script>
</head>
<body>

    <table id="list"></table><div id="pager"></div>
    <span id='ruler' class='ui-th-column' style='visibility:hidden;font-weight:bold'></span>

    <script type="text/javascript">
        var mystr = 
"<?xml version='1.0' encoding='utf-8'?>" +
"<invoices>" +
"    <rows>" +
"        <row>" +
"            <cell>data1a</cell>" +
"            <cell>data1b</cell>" +
"            <cell>data1c</cell>" +
"        </row>" +
"        <row>" +
"            <cell>data2a</cell>" +
"            <cell>data2b</cell>" +
"            <cell>data2c</cell>" +
"        </row>" +
"    </rows>" +
"</invoices>";

        var colNamesData = ['Inv No','Date Of the Transaction', 'Amount That Is Owed'];
        var colModelData = [
            {name:'invid', index:'invid', width:55},
            {name:'invdate', index:'invdate', resizeToTitleWidth:true},
            {name:'amount', index:'amount', align:'right', resizeToTitleWidth:true}];
        jQuery(document).ready(function() {
            var ruler = document.getElementById('ruler');
            for (var i in colNamesData) {
                if (colModelData[i].resizeToTitleWidth != true) {
                    continue;
                }
                // Measure the title using the ruler span
                ruler.innerHTML = colNamesData[i];
                // The +26 allows for padding and to fit the sorting UI
                var newWidth = ruler.offsetWidth + 26;
                if (newWidth < 100) {
                    // Nothing smaller than 100 pixels
                    newWidth = 100;
                }
                colModelData[i].width = newWidth;
            }
            jQuery("#list").jqGrid({
                datatype: 'xmlstring',
                datastr : mystr,
                width:200,
                colNames: colNamesData,
                colModel: colModelData,
                caption: 'My first grid',
                shrinkToFit:false
            });
        });
    </script>
</body>
</html>
